<template>


        <div class="super_container">

                <myheader :total_price="total" :count="count"></myheader>
            
                <!-- Home -->
            
                
            
                <!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll"   ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">秒杀</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li><a href="#">Woman</a></li>
						<li>Accessories</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Products -->

	<div class="products">

		<!-- Sorting & Filtering -->
		<div class="products_bar">
			<div class="section_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div class="products_bar_content d-flex flex-column flex-xxl-row align-items-start align-items-xxl-center justify-content-start">
								<div class="product_categories">
									<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
										<li class="active"><a href="#">All</a></li>
										<li><a href="#">Hot Products</a></li>
										<li><a href="#">New Products</a></li>
										<li><a href="#">Sale Products</a></li>
									</ul>
								</div>
								<div class="products_bar_side ml-xxl-auto d-flex flex-row align-items-center justify-content-start">
									<div class="products_dropdown product_dropdown_sorting">
										<div class="isotope_sorting_text"><span>Default Sorting</span><i class="fa fa-caret-down" aria-hidden="true"></i></div>
										<ul>
											<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "original-order" }'>Default</li>
											<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "price" }'>Price</li>
											<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "name" }'>Name</li>
										</ul>
									</div>
									<div class="product_view d-flex flex-row align-items-center justify-content-start">
										<div class="view_item active"><img src="../assets/images/view_1.png" alt=""></div>
										<div class="view_item"><img src="../assets/images/view_2.png" alt=""></div>
										<div class="view_item"><img src="../assets/images/view_3.png" alt=""></div>
									</div>
									<div class="products_dropdown text-right product_dropdown_filter">
										<div class="isotope_filter_text"><span>Filter</span><i class="fa fa-caret-down" aria-hidden="true"></i></div>
										<ul>
											<li class="item_filter_btn" data-filter="*">All</li>
											<li class="item_filter_btn" data-filter=".hot">Hot</li>
											<li class="item_filter_btn" data-filter=".new">New</li>
											<li class="item_filter_btn" data-filter=".sale">Sale</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="products_container grid">
							
							<!-- Product -->
							<div class="product grid-item hot" v-for="i in sdataList">
								<div class="product_inner">
									<div class="product_image">
										<a :href="'product?id='+i[0]">
											<img :src="base_url+'/static/upload/'+i[3]" alt="">
										</a>
										<div class="product_tag">hot</div>
									</div>
									<div class="product_content text-center">
										<div class="product_title"><a :href="'product?id='+i[0]">{{i[1]}}</a></div>
										<div class="product_price">${{i[2]}}</div>
										<div class="product_button ml-auto mr-auto trans_200"><a href="#" @click="add_cart(i)">add to cart</a></div>
									</div>
								</div>	
							</div>
						</div>
					</div>
				</div>  
			</div>
		</div>
	</div>
            
                <!-- Footer -->
            
                <myfooter  :count_ip='count_ip'></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
		 import Cookies from 'js-cookie'
      
      export default {
        data () {
          return {
            msg: "这是一个变量",
            sdataList:[],
            datalist:[],
			clicked:0,
			upath: '',
			total:0,
			count:0,
			count_ip:0,
          result: '',
          uping:0
          }
        },
        components: {
        'myheader':myheader,
		'myfooter':myfooter,
        },
        mounted:function(){

			this.common.get_menu();
            this.goods();
		 	var data = Cookies.get('cart');
            if (data){
                data = JSON.parse(data)
				this.datalist = data;
				this.post_redis();
				this.total_price();
            }
		},
        methods:{
            changetest(index){
                this.clicked = index;
			},
			
			goods(){
                var skill_goodsurl = this.base_url+"/Skill_Good"
                var _this =this
                this.axios.get(skill_goodsurl).then(function(res){
                    console.log(res)
					_this.sdataList = res.data.good;
					_this.count_ip = res.data.count_ip;
                })
            },
            add_cart:function(good){
                var skill_url = this.base_url+"/SKillHandler"
                this.axios.post(skill_url,this.qs.stringify({
					sid:good[0],
				})).then((res)=>{
                    if(res.data.status == 200){
                        alert(res.data.msg)
                        let cartlist = this.datalist;
                        let findgood = 0;
                        for(let i=0,l=cartlist.length;i<l;i++){
                                if(good[1] == cartlist[i]['name']){
                                    cartlist[i]['num']++;
                                    findgood = 1;
                                    break;
                                }
                        }
                        if(findgood==0){
                            cartlist.push({'id':good[0],'name':good[1],'price':good[2],'img':good[3],'num':1})
                        
                        }
                        this.datalist = cartlist;
                        console.log(this.datalist)
                        Cookies.set('cart',this.datalist,{ expires: 7 })
                        this.post_redis()
                        this.total_price()
                        alert('添加购物车成功,')
                    }else{
                        alert(res.data.msg)
                    }
                })
            },
            
        

        post_redis:function(){
				var add_cart_redis = this.base_url+"/Addcart_redis"
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist)
				}
				this.axios.post(add_cart_redis,this.qs.stringify(params)).then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}

				}); 
            },
            total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},
            
            



        }
      }
      
      
      </script>
       
      <style>
      
            @import '../assets/styles/categories.css';
			@import '../assets/styles/categories_responsive.css';
      
      </style>